
<template>
	<div>
		<InputOutputDefine
			:versionId="props.id"
			:stepCode="props.nodeId"
			:topFlag="false"
			:getResource="getResource"
			:inputFlag="true"
		>
		</InputOutputDefine>

		<a-row>
			<a-col span="4"> </a-col>
			<a-col span="2"><a-tag>数据库：</a-tag></a-col>
			<a-col span="4">
				<a-select
					size="large"
					style="width: 100%"
					v-if="props.componentConfig?.output"
					v-model:value="props.componentConfig.output.dataSourceId"
					placeholder="请选择"
					allowClear
					show-search
				>
					<a-select-option
						v-for="item in dataSourceList"
						:key="item.id"
						:label="item.datasourceName"
						:value="item.id"
					/>
				</a-select>
			</a-col>

			<a-col span="4">
				<Dropdown trigger="custom" :visible="tableViewFlag" style="margin-left: 20px">
					<a href="javascript:void(0)" @click="handleOpen">
						{{ props.componentConfig?.output?.tableName || '请选择表' }}
						<Icon type="ios-arrow-down"></Icon>
					</a>
					<template #list>
						<DropdownMenu>
							<div style="height: 260px; z-index: 99999; overflow-x: scroll; width: 600px">
								<DatabaseTree
									:dataSourceId="props.componentConfig?.output?.dataSourceId"
									:schemaId="props.componentConfig?.output?.schemaId"
									:tableName="props.componentConfig?.output?.tableName"
									:editor="false"
									:selectChange="selectChange"
								/>
							</div>

							<div style="text-align: right; margin: 10px">
								<Button type="primary" @click="handleClose">确认</Button>
							</div>
						</DropdownMenu>
					</template>
				</Dropdown>
			</a-col>
		</a-row>
		<a-row>
			<a-col span="24">
				<a-tag>where:</a-tag>
			</a-col>
		</a-row>
		<a-divider />
		<a-row>
			<a-col span="24">
				<ConditionTable
					v-if="props.componentConfig"
					:height="500"
					:tableFieldList="tableFieldList"
					:values="inputDefine"
					:conditionData="props.componentConfig?.output?.conditionData"
				>
				</ConditionTable>
			</a-col>
		</a-row>
	</div>
</template>
<script setup>
import { onMounted, ref, watch, toRaw, inject, getCurrentInstance } from 'vue'
import { Message, Radio, Row, Switch } from 'view-ui-plus'
import dataSourceApi from '@/api/datasource/dataSourceApi'
import DatabaseTree from '@/views/datasource/databaseTree.vue'
import ConditionTable from './ConditionTable.vue'
import processVersionContentApi from '@/api/process/processVersionContentApi'
import { mergeStepConfigToFrontFile } from '@/utils'

const props = defineProps(['componentConfig', 'nodeId', 'id', 'frontFile'])

const defaultConfig = () => {
	return {
		output: {
			dataSourceId: null,
			schemaId: null,
			tableName: null,
			conditionData: []
		}
	}
}

const dataSourceList = ref([])

const params = ref({})
const inputDefine = ref({})

onMounted(async () => {
	if (!hasProperties(props.componentConfig)) {
		const c = defaultConfig()
		props.componentConfig.output = c.output
	}

	await queryList()

	await queryTableFiledList()

	const c = await getInputDefine()
	inputDefine.value = c
})

const hasProperties = (obj) => {
	if (!obj) {
		return false
	}

	return JSON.stringify(obj) != '{}'
}

const getInputDefine = async () => {
	//需要调用后端查询接口定义
	const read = await processVersionContentApi.getCurrentInputDefine({
		id: props.id,
		frontFile: props.frontFile,
		stepCode: props.nodeId
	})
	return read
}

const queryList = async () => {
	const data = await dataSourceApi.queryList()
	// console.log(data);
	// this.$set(this, "tableData", data);
	dataSourceList.value = data
}

const queryTableFieldDefine = async () => {
	if (!props.componentConfig.output.tableName) {
		return
	}

	const d = await dataSourceApi.queryTableFieldModelList({
		id: props.componentConfig.output.dataSourceId,
		catalogName: props.componentConfig.output.schemaId,
		tableName: props.componentConfig.output.tableName
	})
}

const tableViewFlag = ref(false)

const handleOpen = () => {
	tableViewFlag.value = true
}

const handleClose = () => {
	tableViewFlag.value = false
	//查询一把
	queryTableFieldDefine()
}

const selectTable = ref({})
const tableFieldList = ref([])

const selectChange = (data) => {
	selectTable.value = data
	if (selectTable.value.type != 'table') {
		return
	}
	if (selectTable.value.title == props.componentConfig.output.tableName) {
		return
	}
	props.componentConfig.output.tableName = selectTable.value.title
	props.componentConfig.output.schemaId = selectTable.value.schemaId
	queryTableFiledList()
	props.componentConfig.output.conditionData = []
}

const queryTableFiledList = async () => {
	if (!props.componentConfig.output.tableName) {
		return
	}
	//查询表
	const s = await dataSourceApi.queryTableFieldList({
		id: props.componentConfig.output.dataSourceId,
		catalogName: props.componentConfig.output.schemaId,
		tableName: props.componentConfig.output.tableName
	})
	tableFieldList.value = s
}

const getResource = () => {
	let frontFile = mergeStepConfigToFrontFile(props.frontFile, props.nodeId, props.componentConfig)
	return frontFile
}

//现在开始处理
</script>


<style scoped></style>
